<template>
	<view>
		<view class="menu">
			<view class="menu-item" hover-class="menu-item-hover" v-for="(item, index) in menuList" :key="index" @click="handleItemClick(item)">
				<tn-icon :icon="item.icon" class="menu-icon"></tn-icon>
				<text class="menu-text">{{ item.text }}</text>
			</view>
		</view>
	</view>
</template>

<script>
	import TnIcon from '@/uni_modules/tuniaoui-icon/components/tuniaoui-icon/tuniaoui-icon.vue'


	export default {
		components: {
			TnIcon
		},
		data() {
			return {
				menuList: [{
						text: '用户管理',
						icon: 'my'
					},
					{
						text: '岗位管理',
						icon: 'team'
					},
					{
						text: '角色管理',
						icon: 'job'
					},
					{
						text: '菜单管理',
						icon: 'menu'
					},
					{
						text: '通知公告',
						icon: 'comment'
					},
					{
						text: '日志管理',
						icon: 'level'
					}
				],
			};
		},
		methods: {
			handleItemClick(item) {
				// 处理菜单点击事件
				console.log('点击了菜单', item.text);
			},
		},
	};
</script>

<style scoped>
	.menu {
	  display: flex;
	  flex-wrap: wrap;
	  justify-content: flex-start;
	  padding: 0.5rem;
	}

	.menu-item {
		width: 25%;
		height: 5rem;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		margin-bottom: 0.5rem;
		/* background-color: #f5f5f5; */
		border-radius: 1rem;
	}
	
	.menu-item-hover {
		background-color: #dddddd;
	}

	.menu-text {
		margin-top: 0.5rem;
		font-size: 0.8rem;
		color: #333333;
	}
</style>